<template>
  <div class="app-container">
    <div class="admin-box">
      <div class="admin-title">基本资料</div>
      <div class="ad-user-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form ref="form" :model="form" :label-position="labelPosition" label-width="80px" style="width:600px;">
          <el-form-item label="用户头像">
            <div v-if="!form.image" class="up-img" @click="upImg"><i class="el-icon-plus" /></div>
            <img v-else class="up-img" width="100%" :src="form.image + '?imageView2/1/w/150/h/150'" alt="" @click="upImg">
            <!-- <el-tag>用于登录显示头像，推荐上传尺寸100*100</el-tag> -->
          </el-form-item>
          <el-form-item label="我的角色">
            <span style="font-size:15px;color:#999;">当前角色不可更改为其它角色</span>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" class="form-input" :readonly="true" placeholder="请输入用户名" />
            <span style="font-size:15px;padding-left:10px;color:#999;">不可修改。一般用于后台登入名</span>
          </el-form-item>
          <el-form-item label="姓名" prop="real_name">
            <el-input v-model="form.real_name" class="form-input" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="所属物业公司" prop="tel">
            <el-input v-model="form.wy_name" class="form-input" disabled />
          </el-form-item>
          <!-- <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" class="form-input" placeholder="请输入邮箱" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
            <el-button @click="backFill">重新填写</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validPhone, validEmail } from '@/utils/validate'
import { save } from '@/api/admin-manage'
import { mapGetters } from 'vuex'
import store from '@/store'

export default {
  name: 'Profile',
  data() {
    return {
      form: {
        image: '', // 头像
        username: '', // 用户名
        password: '', // 密码
        name: '', // 昵称
        tel: '', // 电话
        email: '', // 邮箱
        state: '', // 启用状态(0启用，1禁用)
        role_ids: '' ,// 权限id
        wy_name:'',
        real_name:'',
      },
      id: '',
      labelPosition: 'right' // label对齐方式，可选值为right、top、left
    }
  },
  computed: {
    ...mapGetters([
      'userinfo'
    ])
  },
  created() {
    this.getUser()
  },
  mounted() {},
  methods: {
    /* eslint-disable */   //如果要eslint验证，请把这段代码删掉

    // 用户信息
    getUser(){
      // console.log(this.userinfo)
      this.id=this.userinfo.id
      this.form.image=this.userinfo.headimg
      this.form.username=this.userinfo.username
      this.form.password=this.userinfo.password
      this.form.name=this.userinfo.name
      this.form.tel=this.userinfo.tel
      this.form.email=this.userinfo.email
      this.form.state=this.userinfo.state
      this.form.wy_name=this.userinfo.wy_name
      this.form.real_name=this.userinfo.real_name
      this.form.role_ids=this.userinfo.role_id
    },

    // 修改
    onSubmit() {
      if (!this.form.image) {
        this.$message.error('请选择用户头像!')
        return
      }
      if (!this.form.real_name) {
        this.$message.error('昵称不能为空!')
        return
      }
      if (!this.form.real_name) {
        this.$message.error('手机号不能为空!')
        return
      }
      // if (!validPhone(this.form.tel)) {
      //   this.$message.error('请输入正确的手机号!')
      //   return
      // }
      // if (!this.form.email) {
      //   this.$message.error('邮箱不能为空!')
      //   return
      // }
      // if (!validEmail(this.form.email)) {
      //   this.$message.error('请输入正确的邮箱!')
      //   return
      // }
      // console.log(this.form)

      let data={}
      data['admin.id'] = this.id
      data['admin.headimg'] = this.form.image
      data['admin.username'] = this.form.username
      data['admin.password'] = this.form.password
      data['admin.name'] = this.form.name
      data['admin.tel'] = this.form.tel
      data['admin.email'] = this.form.email
      data['admin.state'] = this.form.state
      data['role_id'] = this.form.role_ids

      this.saveUser(data)
    },

    // 保存用户信息函数
    saveUser(data){
      save(data).then(res=>{
        if(res.state){
          this.$message({ message: res.msg, type: 'success' })
          store.dispatch('user/getInfo').then(() => {
            this.getUser()
          })
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 上传头像
    upImg(){
      	// 上传单个文件
			this.hhFolder({
				max: 1,
				filter: 'image',
				thumb_w: 500,
				thumb_h: 250,
				success: files => {
					this.form.image = files[0].url;
				}
			});
    },

    // 回填
    backFill(){
      this.getUser()
    },

  }
}
</script>

<style  lang="scss" scoped>
.admin-box{
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
  background: #fff;

  .admin-title{
    font-size: 16px;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .ad-user-form-div{
    padding: 16px 40px;

    .up-img {
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 120px;
      height: 120px;
      cursor: pointer;
      line-height: 120px;
      vertical-align: top;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-plus {
        font-size: 28px;
        color: #8c939d;
      }
    }
    .up-img:hover {
      border: 1px dashed #409eff;
    }

    .form-input{
      width: 220px;
    }
  }
}
</style>

<style lang="scss"> // element-ui样式修改
.ad-user-form-div{
   label{
    font-weight: 500;
  }
  .el-form-item__label{
    font-size: 15px;
    color: #333;
  }
}
</style>

